<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>2:实现类似淘宝首页的图片轮播，五张图片轮流按照顺序显示，1秒切换一次，如果鼠标放在图片上，则停止，鼠标移开，继续轮播；
			下面有5个图片索引，对应五张图片，在图片右下角，显示到第几张，则对应位置的圆点背景色为红色。每张图片都是一个链接</title>
		<style>
			#d {
				list-style-type: none;
				display: flex;
				margin-top: -36px;
				margin-left: 180px;

			}

			button {
				width: 16px;
				height: 16px;
				border-radius: 50%;
				margin-left: 6px;
				border: none;
			}
		</style>

		<script>
			var im = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"];
			var aa = ["https://www.baidu.com", "https://www.360.com", "https://www.bdqn.com",
				"https://www.icbc.com",
				"https://www.abc.com"
			]
			var i = 0;
			var js = setInterval(function() {
				var di=document.getElementById("d");
				di.children[i].firstElementChild.style.backgroundColor="white";
				i++;
				if (i >= aa.length) {
					i = 0;
				}
				di.children[i].firstElementChild.style.backgroundColor="orange";
				document.getElementById("aw").href = aa[i];
				document.getElementById("aw").children[0].src = im[i];
				
			}, 1000);

			function over() {
				clearInterval(js);
			}
			function shiftImg(index){
				clearInterval(js);
				var di=document.getElementById("d");
				di.children[i].firstElementChild.style.backgroundColor="white";
			 
				i=index;
				document.getElementById("aw").children[0].src = im[i];
				 
				di.children[i].firstElementChild.style.backgroundColor="orange";
				
			}
			function out() {
				js = setInterval(function() {
					var di=document.getElementById("d");
					di.children[i].firstElementChild.style.backgroundColor="white";
					i++;
					if (i >= aa.length) {
						i = 0;
					}
					di.children[i].firstElementChild.style.backgroundColor="orange";
					document.getElementById("aw").href = aa[i];
					document.getElementById("aw").children[0].src = im[i];
					
				}, 1000);
			}
		</script>
	</head>
	<body>
		<div>
			<a id="aw" href="#"><img src="1.jpg" alt="" onmouseover="over()" onmouseout="out()"></a>
			<ul id="d">
				<li ><button onmouseover="shiftImg(0)" onmouseout="out()" style="background-color: orange;"></button></li>
				<li><button onmouseover="shiftImg(1)" onmouseout="out()"></button></li>
				<li><button onmouseover="shiftImg(2)" onmouseout="out()"></button></li>
				<li><button onmouseover="shiftImg(3)" onmouseout="out()"></button></li>
				<li><button onmouseover="shiftImg(4)" onmouseout="out()"></button></li>
			</ul>
		</div>
	</body>
</html>
